<template>
  <div>
    <div
      id="content"
      :style="{
        'margin-bottom': Object.keys(getMusic).length == 0 ? '50px' : '116px',
      }"
    >
      <Swipe />
      <!-- <Tag>热门歌单</Tag> -->
      <van-tabs v-model="tabActive">
        <van-tab title="热门歌单">
          <van-loading size="24px" vertical class="loading" v-show="loading"
            >加载中...</van-loading
          >
          <SongSheetsCom :SongSheets="SongSheets" />
        </van-tab>
        <van-tab title="推荐歌曲">
          <div id="songsContainer">
            <div id="tag">
              <van-button
                round
                size="small"
                type="default"
                :class="{ tagActive: tagActive == '流行' }"
                @click="tagChange('流行')"
                >流行</van-button
              >
              <van-button
                round
                size="small"
                type="default"
                :class="{ tagActive: tagActive == '摇滚' }"
                @click="tagChange('摇滚')"
                >摇滚</van-button
              >
              <van-button
                round
                size="small"
                type="default"
                :class="{ tagActive: tagActive == '电子' }"
                @click="tagChange('电子')"
                >电子</van-button
              >
              <van-button
                round
                size="small"
                type="default"
                :class="{ tagActive: tagActive == '说唱' }"
                @click="tagChange('说唱')"
                >说唱</van-button
              >
              <van-button
                round
                size="small"
                type="default"
                :class="{ tagActive: tagActive == '游戏' }"
                @click="tagChange('游戏')"
                >游戏</van-button
              >
            </div>
            <div id="search">
              <van-search
                v-model="value"
                placeholder="请输入搜索关键词"
                input-align="center"
                @input="onSearch"
              />
            </div>
            <div id="songs">
              <div
                v-for="(item, index) in songs"
                :key="item.id"
                class="song"
                @click="getSongsUrl(item, index)"
              >
                <span>
                  <span></span>
                  <van-icon name="play-circle-o" color="#ccc" size="22" />
                  <img
                    :src="item.img"
                    alt=""
                    :class="{ imgActive: index == songActive }"
                    v-lazy="item.img"
                /></span>
                <!-- :style="{
                      '-webkit-animatio':
                        true ? 'run 6s linear 0s infinite' : '',
                    }" -->
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <TabBar />
  </div>
</template>

<script>
import { ifTabBar } from "@/common/mixin";
import { mapGetters } from "vuex";
import {
  getSongSheet,
  searchSongs,
  getSongsDetail,
  getSongsUrl,
} from "@/api/music";
import TabBar from "@/components/common/TabBar";
import Swipe from "@/components/common/Swipe";
import Tag from "@/components/common/Tag";
import SongSheetsCom from "./childComps/SongSheets";
export default {
  data() {
    return {
      value: "",
      SongSheets: [], //歌单
      tabActive: 0, //tab选择状态
      loading: true,
      songs: [], // 推荐歌曲
      tagActive: "流行",
      songActive: 9999,
    };
  },
  components: {
    TabBar,
    Swipe,
    Tag,
    SongSheetsCom,
  },
  computed: {
    ...mapGetters(["getMusic", "getAudio"]),
  },
  mixins: [ifTabBar],
  created() {
    this.getSongSheet(); //获取歌单
    (async () => {
      await this.searchSongs(); // 获取默认搜索音乐id
      this.getSongsDetais(); //获取音乐详情
    })();
  },
  methods: {
    getSongSheet() {
      getSongSheet().then((res) => {
        this.SongSheets = res.playlists;
        console.log(res.playlists);
        this.loading = false;
      });
    },
    async searchSongs(keyword = "流行") {
      //  api
      await searchSongs(keyword).then((res) => {
        this.songs = res.result.songs;
      });
    },
    getSongsDetais() {
      this.songs.forEach((item, index) => {
        getSongsDetail(item.id).then((res) => {
          // this.songs[index].picUrl = res.songs[0].al.picUrl;
          // songs增加pic
          this.$set(this.songs[index], "img", res.songs[0].al.picUrl);
          // songs增加歌手名字
          let arName = item.artists.map((item) => {
            return item.name;
          });
          console.log("item", item);
          arName = arName.join("/");
          this.$set(this.songs[index], "arName", arName);
        });
      });
    },
    getSongsUrl(item, index) {
      // 图片旋转
      this.songActive = index;
      // api
      getSongsUrl(item.id).then((res) => {
        let ifadd = [];
        const url = res.data[0].url;
        const song = {
          id: item.id,
          title: item.name,
          artist: item.arName,
          url,
          pic: item.img,
        };
        this.$store.commit("playMusic", song);
        this.$bus.$emit("playMusic", song);
        // 判断列表里是否有音乐
        if (this.getAudio.length != 0) {
          ifadd = this.getAudio.filter((item) => {
            return item.id == song.id;
          });
          if (ifadd.length != 0) return;
        }
        this.$store.commit("musicLstAdd", song);
      });
    },
    tagChange(keyword) {
      // 切换tag active
      this.tagActive = keyword;
      (async () => {
        await this.searchSongs(keyword);
        this.getSongsDetais();
      })();
    },
    onSearch(keyword) {
      console.log("ser");
      (async () => {
        await this.searchSongs(keyword);
        this.getSongsDetais();
      })();
    },
  },
};
</script>

<style lang='less' scoped>
.tagActive {
  background: #1989fa;
  color: white;
}

#content {
  margin-bottom: 50px;
}
// 屏蔽tabactive border
#content /deep/ .van-tabs__line {
  display: none;
}

#content /deep/ .van-tab__text {
  position: relative;
  padding-left: 8px;
  line-height: 15px;
}

#content /deep/ .van-tab--active {
  color: #3388ff;
  font-weight: 600;
}

#content /deep/ .van-tab--active ::before {
  content: "";
  height: 15px;
  width: 3px;
  background: #3388ff;
  position: absolute;
  left: 0;
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.van-tabs {
  min-height: 465px;
  position: relative;
}

#songsContainer {
  // padding: 10px;
  #songs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .song {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 22%;
      padding: 15px;
      span:nth-child(1) {
        position: relative;
        span {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 22px;
          width: 22px;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          z-index: 1;
        }
        i {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
        }
        img {
          width: 100%;
          border-radius: 50%;
          height: 91px;
          width: 91px;
          // -webkit-animation: run 6s linear 0s infinite;
        }
        .imgActive {
          width: 100%;
          border-radius: 50%;
          -webkit-animation: run 6s linear 0s infinite;
        }
        @-webkit-keyframes run {
          from {
            -webkit-transform: rotate(0deg);
          }
          to {
            -webkit-transform: rotate(360deg);
          }
        }
      }
      span:nth-child(2) {
        font-size: 14px;
      }
    }
  }
}

#tag {
  width: 100%;
  display: flex;
  justify-content: center;
  button {
    margin: 0 10px;
    height: 25px;
    width: 100%;
  }
}
</style>
